<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../icon/iconfont.css" />
    <style>
        body {
            padding: 1.6rem 0.8rem 0 0.8rem;
        }

        header span:nth-of-type(1) {
            font-size: 1rem
        }

        header span:nth-of-type(2) {
            font-size: 1rem
        }
        .title {
            padding: 0.8rem 0 0.4rem 0;
            /*text-align: center;*/
        }

        .box {
            width: 100%;
            height: 3rem;
            border-top: 1px solid rgb(223, 223, 225);
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            /*color: rgb(215, 32, 45)*/
        }

        .right {
            position: relative;
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .box1 {
            width: 100%;
            height: 3rem;
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left1 {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left1 p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            color: #000
        }

        .right1 {
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right1 input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }
        .box2 {
            width: 100%;
            height: 3rem;
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left2 {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left2 p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            color: #000
        }

        .right2 {
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right2 input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }
        .box3 {
            width: 100%;
            height: 3rem;
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
            margin-bottom: 0.5rem
        }

        .left3 {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left3 p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            color: #000
        }

        .right3 {
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right3 input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .submit {
            margin-top: 1rem;
            width: 100%;
            height: 2.3rem;
            background-color: rgb(215, 32, 45);
            text-align: center;
            line-height: 2.3rem;
            font-size: 0.9rem;
            color: #fff
        }
    </style>
</head>

<body>
    <header>
        <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
        <span>修改密码</span>
    </header>
    <div class="content">
        <p class="title">设置密码后可以通过账号+密码登录APP</p>
        <div class="box">
            <div class="left">
                <p>账号</p>
            </div>
            <div class="right">
                <input type="number" placeholder="18297999901" id="tel" readonly>
            </div>
        </div>
        <div class="box1">
            <div class="left1">
                <p>旧密码</p>
            </div>
            <div class="right1">
                <input type="password" placeholder="请填写旧密码" id="oldpassword" maxlength="18">
            </div>
        </div>
        <div class="box2">
            <div class="left2">
                <p>新密码</p>
            </div>
            <div class="right2">
                <input type="password" placeholder="请填写新密码" id="password">
            </div>
        </div>
        <div class="box3">
            <div class="left3">
                <p>确认密码</p>
            </div>
            <div class="right3">
                <input type="password" placeholder="请确认新密码" id="repassword">
            </div>
        </div>
        <p>密码必须6-18个字符。</p>
        <button class="submit" id="submit">确认修改</button>
    </div>
</body>
<script type="text/javascript" src="../../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../script/dns.js"></script>
<script type="text/javascript" src="../../../../script/aui-toast.js"></script>
<script type="text/javascript">
    apiready = function() {

    };
    var toast = new auiToast({
        })
    $("#submit").click(function () {
      var token = localStorage.getItem("token");
      var oldpassword = document.getElementById("oldpassword").value;
      var password = document.getElementById("password").value;
      var repassword = document.getElementById("repassword").value;
      if (!( /^[a-zA-Z0-9]{6,18}$/.test(oldpassword))||!( /^[a-zA-Z0-9]{6,18}$/.test(password))) {
          toast.fail({
              title:"输入的密码格式不正确，请重新输入!",
              duration:1500
          });
          return false;
      };
      if (oldpassword==password) {
          toast.fail({
              title:"新旧密码不能相同，请重新输入!",
              duration:1500
          });
          return false;
      };
      if (password!=repassword) {
          toast.fail({
              title:"两次输入密码不一样，请重新输入!",
              duration:1500
          });
          return false;
      };
      $.ajax({
        type:"post",
        beforeSend:function (request) {
          request.setRequestHeader("token",token)
        },
        data:{
          old_password:oldpassword,
          password:password,
          repassword:repassword
        },
        url:dns+"user/update/password",
        success:(res)=> {
          console.log(JSON.stringify(res));
          if(res.code == 20000){
            toast.success({
                title:"修改成功!",
                duration:1500
            });
            setTimeout(function () {
              console.log(222);
              api.openWin({
                  name: 'login',
                  url: '../../../system/login.html',
                  pageParam: {}, //页面代参数
                  rect: {
                      x: 0,
                      y: 25,
                      w: api.winWidth,
                      h: api.winHeight
                  }
              });
            },1000)
          }
        },
        error:(err)=>{
          var json = JSON.parse(err.responseText);
          toast.fail({
              title:json.msg,
              duration:1500
          });
        }
      })
    })
</script>

</html>
